<template>
    <page-header-wrapper :title="false">
      <a-spin :spinning="loading">
        <a-card :style="{ marginBottom: '20px' }">
          <a-row :gutter="[10,10]">
            <a-col :span="4">
              <a-dropdown :trigger="['click']" class="button-item" @visibleChange="$router.push({ name:'MemberBilled',query:{ day: 3 } })">
                <a-button :style="{ fontSize: '16px' }">
                  3天未开单
                  <a-icon type="down" />
                </a-button>
              </a-dropdown>
            </a-col>
            <a-col :span="4">
              <a-dropdown :trigger="['click']"  class="button-item" @visibleChange="$router.push({ name:'MemberBilled',query:{ day: 5 } })">
                <a-button :style="{ fontSize: '16px' }">
                  5天未开单
                  <a-icon type="down" />
                </a-button>
              </a-dropdown>
            </a-col>
            <a-col :span="4">
              <a-dropdown :trigger="['click']" class="button-item" @visibleChange="$router.push({ name:'MemberBilled',query:{ day: 10 } })">
                <a-button :style="{ fontSize: '16px' }">
                  10天未开单
                  <a-icon type="down" />
                </a-button>
              </a-dropdown>
            </a-col>
            <a-col :span="4">
              <a-dropdown :trigger="['click']" class="button-item">
                <a-menu slot="overlay">
                  <a-menu-item key="1"><router-link to="/wechat/wx"><a-badge status="processing" />微信统计</router-link></a-menu-item>
                  <a-menu-item key="2"><router-link to="/calls"><a-badge status="processing" />通话统计</router-link></a-menu-item>
                </a-menu>
                <a-button :style="{ fontSize: '16px' }">
                  <a-icon :style="{ fontSize: '18px',color: '#f5222d' }" type="pie-chart" />
                  数据统计
                  <a-icon type="down" />
                </a-button>
              </a-dropdown>
            </a-col>
            <a-col :span="4">
              <a-dropdown :trigger="['click']" class="button-item">
                <a-menu slot="overlay">
                  <a-menu-item key="1"><router-link to="/customer"><a-badge status="processing" /> 客户查询</router-link></a-menu-item>
                  <a-menu-item key="2"><router-link to="/contract"><a-badge status="processing" /> 合同查询</router-link></a-menu-item>
                  <a-menu-item key="3"><router-link to="/business"><a-badge status="processing" /> 业务查询</router-link></a-menu-item>
                  <a-menu-item key="4"><router-link to="/member"><a-badge status="processing" /> 顾问查询</router-link></a-menu-item>
                  <a-menu-item key="5"><router-link to="/calls"><a-badge status="processing" /> 通话查询</router-link></a-menu-item>
<!--                  <a-menu-item key="6"><a-badge status="processing" /> 发票查询</a-menu-item>-->
                </a-menu>
                <a-button :style="{ fontSize: '16px' }">
                  <a-icon :style="{ fontSize: '18px',color: '#f5222d' }" type="search" />
                  快速查询
                  <a-icon type="down" />
                </a-button>
              </a-dropdown>
            </a-col>
            <a-col :span="4">
              <a-dropdown :trigger="['click']" class="button-item">
                <a-menu slot="overlay">
                  <a-menu-item key="1"><router-link to="/member/setting"><a-badge status="processing" /> 组员设置</router-link></a-menu-item>
                  <a-menu-item key="2"><router-link to="/schedule"><a-badge status="processing" /> 排班设置</router-link></a-menu-item>
<!--                  <a-menu-item key="3"><a-badge status="processing" /> 奖励设置</a-menu-item>-->
                </a-menu>
                <a-button :style="{ fontSize: '16px' }">
                  <a-icon :style="{ fontSize: '18px',color: '#f5222d' }" type="setting" />
                  快速设置
                  <a-icon type="down" />
                </a-button>
              </a-dropdown>
            </a-col>
          </a-row>
        </a-card>
        <a-card>
          <template slot="title">
            <a-row :style="{ height: '40px', lineHeight: '40px' }">
              <a-col :span="18">
                <a-carousel :dots="false" autoplay>
                  <router-link v-for="item in msgList" :key="item.id" :to="{ name: 'MessageDetail', params: { id: item.id } }">
                    <a-alert showIcon type="info">
                      <template slot="message">
                        <ellipsis :length="50">【{{msgOpts[item.msg_type]}}】{{item.title}}</ellipsis><span style="margin-left: 20px;font-weight: 500;">{{item.created_at}}</span>
                      </template>
                    </a-alert>
                  </router-link>
                </a-carousel>
              </a-col>
            </a-row>
          </template>
          <template slot="extra">
            <div v-if="state">
                  今日业绩：<a-tag color="red">{{indexData.todayYj}}</a-tag>
                  / 当月业绩：<a-tag color="red">{{indexData.thisMonthYj}}</a-tag>
                  / 今日微信添加量：<a-tag color="red">{{indexData.wx_count}}</a-tag>
                  / 今日总通时：<a-tag color="red">{{(indexData.todayZts/60).toFixed(2)}}</a-tag>
              <a-button v-if="isInvoice" size="small" type="danger" style="margin-left: 20px;" @click="$router.push({ name: 'CheckInvoice' })">{{indexData.invoiceDsh}}条发票待审核</a-button>
            </div>
          </template>
          <a-row :gutter="[10,10]">
            <a-col :span="4" v-for="(item,index) in leaderList" :key="item.leader_uid">
              <a-card bordered hoverable :class="item.bg" @click="$router.push({ name: 'GroupManager', params: { id: item.leader_uid } })">
                <template slot="actions">
                  <div>
                    <div>{{item.work_num}}</div>
                    <div>上班人数</div>
                  </div>
                  <div>
                    <div>{{item.ztc}}</div>
                    <div>通话数量</div>
                  </div>
                  <div>
                    <div>{{item.zht}}</div>
                    <div>合同</div>
                  </div>
                </template>
                <a-card-meta>
                  <div slot="title" :style="{ textAlign: 'center' }">
                    <h2>{{item.leader_name}}</h2>
                    <h5>今日业绩/月总业绩/平均业绩</h5>
                    <h4>{{(item.jr_yj / 10000).toFixed(2)}} / {{(item.dy_yj / 10000).toFixed(2)}} / {{(item.pj_yj / 10000).toFixed(2)}}</h4>
                    <a-button size="small" shape="round" ghost>{{item.group_type}}</a-button>
                  </div>
                </a-card-meta>
                <div class="operate" v-if="index == 0"><a-icon theme="filled" :style="{ fontSize: '20px', color: '#fff' }" type="crown" /></div>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-spin>
    </page-header-wrapper>
</template>

<script>
  import storage from 'store'
import { getCsoData, getIndex } from '@/api/leader'
import { getMessage } from '@/api/message'
import Ellipsis from '@/components/Ellipsis/Ellipsis'
  import { CURRENT_COMPANY } from '@/store/mutation-types'

  export default {
    name: 'CsoIndex',
    components: {
      Ellipsis
    },
    data () {
      return {
        leaderList: {},
        groupType: {},
        loading: true,
        indexData: {},
        state: false,
        msgList: [],
        msgOpts: {},
        currentCompany: storage.get(CURRENT_COMPANY),
        isInvoice: true
      }
    },
    created () {
      this.getLeaderList()
      this.getIndexData()
      this.getMsg()
      if (this.currentCompany === 'zy' || this.currentCompany === 'jh') {
        this.isInvoice = false
      }
    },
    methods: {
      getIndexData () {
        getIndex().then(res => {
          if (res.status === 0) {
            this.indexData = res.result
            this.state = true
          }
        })
      },
      getLeaderList () {
        const app = this
        let list = []
        app.loading = true
        getCsoData().then(res => {
          const result = res.result.data
          list = result
          app.groupType = res.result.group_type
          for (const k in result) {
            if (result[k].group_type_status === 'tm') {
              list[k].bg = 'bg-blue'
            }
            if (result[k].group_type_status === 'pt') {
              list[k].bg = 'bg-cyan'
            }
            if (result[k].group_type_status === 'sh') {
              list[k].bg = 'bg-vol'
            }
            if (result[k].group_type_status === 'iso') {
              list[k].bg = 'bg-primary'
            }
          }
          app.leaderList = res.result.data
        }).finally(() => {
          app.loading = false
        })
      },
      getMsg () {
        getMessage().then(res => {
          this.msgList = res.result.data
          this.msgOpts = res.result.msg_opts
        })
      }
    }
  }
</script>

<style scoped>
  .operate{
    position: absolute;
    left: 0;
    top: 10px;
    width: 40px;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
    border-radius: 0 50% 50% 0;
    background: #f5a713;
  }
  .bg-blue {
    background: #67809f;
  }
  .bg-cyan {
    background: #13c2c2;
  }
  .bg-vol {
    background: #fa541c;
  }
  .bg-primary {
    background: #1890ff
  }
  .bg-cyan h2, .bg-cyan h4, .bg-cyan h5 {
    color: #fff;
  }
  .bg-vol h2, .bg-vol h4, .bg-vol h5 {
    color: #fff;
  }
  .bg-blue h2, .bg-blue h4, .bg-blue h5 {
    color: #fff;
  }
  .bg-primary h2, .bg-primary h4, .bg-primary h5 {
    color: #fff;
  }
  .button-item {
    width: 100%;
    height: 60px;
    line-height: 60px;
  }
</style>
